<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<link rel="stylesheet" href="../css/base.css">
		<script src="../js/jquery-1.8.3.min.js"></script>
		<script src="../js/laydate/laydate.js"></script>
		<script src="../js/public.js"></script>
		<title>发布信息</title>
		<style>
		html{
			height: 100%;
		}
			body {
				background: #f2f2f2;
				height: 100%;
			}
			.list {
				height: .88rem;
				background: #fff;
				overflow: hidden;
				border-bottom: 1px solid #f2f2f2;
			}
			.list-fl {
				float: left;
				width: 30%;
				padding-left: .2rem;
				line-height: .88rem;
			}
			.list-mid {
				width: 60%;
				float: left;
			}
			.dates {
				border: none;
				text-align: right;
				line-height: .88rem;
				background: #fff;
				float: right;
			}
			.list-fr {
				text-align: right;
				padding-right: .2rem;
				box-sizing: border-box;
			}
			.list-fr-img {
				width: .18rem;
				margin: .28rem auto;
			}
			.div-btn {
				width: 80%;
				margin: 10px auto;
				text-align: center;
				line-height: .88rem;
				border-radius: 0.15rem;
				border: 0.01rem solid #5F3104;
				color: #5F3104;
			}
			.choose1 {
				width: .8rem;
				height: .4rem;
				margin: .24rem 0;
			}
			.alert-div {
				width: 80%;
				position: fixed;
				left: 10%;
				right: 10%;
				top: 10%;
				height: 363px;
				z-index: 101;
				display: none;
				background: #fff;
			}
			.span-list {
				background: #fff;
				color: #333;
				width: 100%;
				text-align: center;
				display: block;
				border-bottom: 1px solid #ddd;
				border-radius: .04rem;
			}
			.divlist {
				width: 100%;
				float: left;
				text-align: center;
				background: #fff;
				border-radius: .04rem;
			}
			.haha {
				width: 100%;
				text-align: center;
				border-bottom: 1px solid #ddd;
			}
			.fenlei {
				margin-top: .2rem;
				float: right;
			}
			.yikouja {
				line-height: 40px;
				border: none;
				border-bottom: 1px solid #ddd;
				text-align: right;
				font-size: 12px;
				width: 100%;
				display: none;
				padding-right: .2rem;
				box-sizing: border-box;
			}
			.f14 {
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<div id="overlay"></div>
		<div class="list">
			<div class="list-fl">作品名字</div>
			<div class="list-mid">
				<input type="text" class="dates f14" id="produceTitle" placeholder="请填写作品名字">
			</div>
			<div class="list-fr">
				<img src="../img/下一步@2x.png" class="list-fr-img">
			</div>
		</div>
		<div class="list">
			<div class="list-fl">泥料</div>
			<div class="list-mid">
				<input type="text" class="dates f14" id="paste_materials" placeholder="请填写泥料">
			</div>
			<div class="list-fr">
				<img src="../img/下一步@2x.png" class="list-fr-img">
			</div>
		</div>
		
		<div class="list">
			<div class="list-fl">尺寸</div>
			<div class="list-mid">
				<input type="text" class="dates f14" id="measure" placeholder="请填写尺寸">
			</div>
			<div class="list-fr">
				<img src="../img/下一步@2x.png" class="list-fr-img">
			</div>
		</div>
		<!--<div class="list">
			<div class="list-fl">备注</div>
			<div class="list-mid">
				<input type="text" class="dates f14" id="remark" placeholder="请填写产品名字" value="如需批发或者定制请联系客服。" disabled="disabled">
			</div>
			<div class="list-fr">
				<img src="../img/下一步@2x.png" class="list-fr-img">
			</div>
		</div>-->
		<div class="list">
			<div class="list-fl">制作工艺</div>
			<div class="list-mid">
				<input type="text" class="dates f14" id="technology" placeholder="请填写制作工艺">
			</div>
			<div class="list-fr">
				<img src="../img/下一步@2x.png" class="list-fr-img">
			</div>
		</div>
		<div class="list">
			<div class="list-fl">制作时间</div>
			<div class="list-mid">
				<input type="text" class="dates f14" id="make_time" placeholder="例：2018-02-15">
			</div>
			<div class="list-fr">
				<img src="../img/下一步@2x.png" class="list-fr-img">
			</div>
		</div>
		<!--<div class="list">
			<div class="list-fl">
				分类
			</div>
			<div class="list-mid">
				<!--<input type="text" class="dates" placeholder="">
				<span id="fenlei" class="fenlei">请填写分类</span>
			</div>
			<div class="list-fr">
				<img src="../img/下一步@2x.png" class="list-fr-img">
			</div>
		</div>-->
		<div id="alert-div" class="alert-div">
			<div style="line-height: .44rem;text-align: right;font-size: 12px;padding-right: 5px;box-sizing: border-box;" onclick="closeAlert()">
				关闭
			</div>
			<div>分类选取</div>
			<div style="height: 300px;overflow: auto;">
				<div>
					<p style="color: #fa4535;background: #fff;">一级分类</p>
					<p id="one_tab" style="overflow: hidden;"></p>
				</div>
				<div>
					<p style="color: #fa4535;background: #fff;">二级分类</p>
					<p id="one_tab_show" style="overflow: hidden"></p>
				</div>
			</div>
			<div onclick="trueObj()" style="background: #fa4535;text-align: center;font-size: 12px;height: .44rem;line-height:.44rem;color: #fff;">
				确认
			</div>
		</div>
		<div class="div-btn" onclick="truePost_befor()">下一步</div>
	</body>
		<script>
			var oneobjname = '';
			var twoobjname = '';
			var firstTypeId = '';
			var secondTypeId = '';
			var keywords = sessionStorage.keywords;
			var imgs = GetQueryString("imgs");//获取轮播图的信息
			$(function() {
				getFl(); //获取分类
				
			});
			function closeAlert() {
				/***关闭弹层***/
				hideOverlay();
				$(".span-list").css({
					background: "#fff",
					color: "#333"
				});
				$(".haha").css({
					background: "#fff",
					color: "#333"
				});
				firstTypeId = '';
				secondTypeId = '';
				$("#alert-div").hide();
			}
			function getFl() { //获取分类
				$.ajax({
					url: base_url + "ZITAOHUI/allProduceType",
					type: "post",
					success: function(data) {
						//console.log(data);
						if(data.code == 1) {
							var _d = data.extend.list;
							$.each(_d, function(k, v) {
								$("#one_tab").append('<span class="span-list" data-index="' + k + '" data-id="' + v.firstTypeId + '" onclick="showSmallobj(this)">' + v.firstTypeDiscribe + '</span>');
								if(k > 0) {
									$("#one_tab_show").append('<div class="divlist" style="display: none;"></div>');
								} else {
									$("#one_tab_show").append('<div class="divlist"></div>');
								}
								$.each(v.pst, function(ks, vs) {
									$(".divlist:last").append('<div class="haha" data-firstid="' + vs.firstTypeId + '" data-id="' + vs.secondTypeId + '" onclick="twoobj(this)">' + vs.secondTypeDiscibe + '</div>')
								})
							})
						}

					},
					error: function(erroe) {

					}
				})
			}

			function showSmallobj(obj) { //一级分类点击事件
				var _i = $(obj).attr("data-index");
				var _id = $(obj).attr("data-id");
				$(".span-list").css({
					background: "#fff",
					color: "#333"
				});
				$(".span-list").eq(_i).css({
					background: "#fff",
					color: "red"
				});
				$(".span-list").eq(_i).attr("on", "1");
				firstTypeId = _id;
				oneobjname = $(".span-list").eq(_i).text();
				$(".divlist").hide();
				$(".divlist").eq(_i).show();
			}

			function twoobj(obj) { //二级分类点击事件
				if(isNull(firstTypeId)) {
					alert("请先选择一级分类");
					return false;
				}
				var _id = $(obj).attr("data-id");
				$(".haha").css({
					background: "#fff",
					color: "#333"
				});
				$(obj).css({
					background: "#fff",
					color: "red"
				});
				$(obj).attr("ons", "2");
				secondTypeId = _id;
				twoobjname = $(obj).text();
			}

			function trueObj() {
				if(isNull(oneobjname)) {
					alert("请选择一级分类");
					return false;
				}
				if(isNull(twoobjname)) {
					alert("请选择二级分类");
					return false;
				}
				hideOverlay();
				$("#fenlei").text(oneobjname + "," + twoobjname);
				$("#alert-div").hide();
			}
			$(function() {
				$("#fenlei").click(function() {
					showOverlay();
					$("#alert-div").show();
				})

			});

			function truePost_befor() {//检测是否输入完整的函数
				var produceTitle = $('#produceTitle').val();//作品名称
				//var fenlei = $("#fenlei").text() == '请填写分类' ? false : true;//分类
				var paste_materials = $("#paste_materials").val();//泥料
				var measure = $("#measure").val();//尺寸
				//var remark = $("#remark").val();//备注
				var technology = $("#technology").val();//制作工艺
				var make_time = $("#make_time").val();
				if(produceTitle  && paste_materials && measure  && technology && make_time) {
					truePost();
				} else {
					alert('您有信息未填写完整');
					$('input').each(function(k){
						if($(this).val()==''){
							$('input').eq(k).focus();
						}
					})
				}
			}
			function truePost(){//把这两个页面的内容保存在sessionStorage
				var my_production = {
						user_id:sessionStorage.u_id,
						store_id:sessionStorage.s_id,
//						production_type: null, //产品大类
//						production_type_second: null, //产品小类
						production_status : "1",//(状态0:草稿箱,1:审核中,2:展示中,3:审核失败)
						production_presentation: keywords, //产品描述，
						onlyStoreId: sessionStorage.getItem("s_id"), //店铺id,
						production_slideshow: imgs,//轮播图
						production_name: $("#produceTitle").val(),//产品标题
						production_pug:$("#paste_materials").val(),//泥料
						production_size:$("#measure").val(),//尺寸
						production_remark:$("#make_time").val(),//制作时间
						production_technology:$("#technology").val()//工艺
//						author_name:"",
//						author_photo_url:"",
//						author_presentation:""
				}			
				sessionStorage.my_production =  JSON.stringify(my_production);
				window.location.href = "./my_homeWork.html";//跳转到作者信息页面
			}

		</script>
</html>